<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body {
			    padding: 0;
			    margin: 0;
			    background: #eab7b7;
			}
			.zong{
				width: 1200px;
				border: 1px solid #c2c2e1;
				border-radius: 5px;
				margin: 100px auto;
				background: url(img/4.jpg)no-repeat;
				background-size: cover;
				opacity: 0.7;
			}
			h2 {
			    font-size: 29px;
			    margin-left: 430px;
			    color: #d27b7b;
			}
			.zzz {
			    color: #45bdff;
			}
			.sss {
			    color: black;
			    list-style: none;
			}
			p {
			    font-size: 15px;
			    color: #4226ff;
			}
		</style>
	</head>
	<body>
		<div class="zong">
			<h2>position属性的使用总结</h2>
			<ul class="zzz">
				<li class="diyige">
					<h3>属性定义及使用说明：</h3>
					<ul class="sss">
						<li>1:position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。</li>
						<li>2:默认值：static</li>
						<li>3:继承：no</li>
						<li>4:版本：CSS2</li>
						<li>5:JavaScript 语法：object.style.position="absolute"</li>
					</ul>
					<p>温馨提示：对于IE浏览器除了IE高版本其他的都不兼容！</p>
				</li>
				<li class="diyige">
					<h3>浏览器支持</h3>
					<ul class="sss">
						<li>1:position属性在谷歌浏览器中是可行的，1.0版本以上都兼容！</li>
						<li>2:position属性在火狐浏览器中是可行的，1.0版本以上可兼容！</li>
						<li>3:position属性在opear浏览器中可行，4.0版本以上可兼容！</li>
						<li>4:position属性在safia浏览器中，1.0版本以上可兼容！</li>
						<li>5:position属性在IE浏览中，IE9.0以上版本可兼容！</li>
					</ul>
					<p>温馨提示：不同的浏览器对position的属性显示的效果有所不同！</p>
				</li>
				<li class="diyige">
					<h3>属性值</h3>
					<ul class="sss">
						<li>1:absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位</li>
						<li>2:fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。</li>
						<li>3:relative：生成相对定位的元素，相对于其正常位置进行定位。</li>
						<li>4:static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。</li>
						<li>5:inherit：规定应该从父元素继承 position 属性的值。</li>
					</ul>
					<p>温馨提示：不同的属性值请根据不同的需要来使用对应的属性值！</p>
				</li>
				<li class="diyige">
					<h3>使用定位时该注意的事项</h3>
					<ul class="sss">
						<li>1：注意定位的那个子父元素的关系！</li>
						<li>2：按要求来使用定位中的值！</li>
						<li>3：要掌握决定定位的无亲性，与破坏性！</li>                                                                                                                     </li>
						<li>4：利用相对定位对绝对定位的局限性！可以根据要求达到想要的效果！</li>
						<li>5：相对定位会保留自己原有的位置，并不被其他块级元素占用！</li>
					</ul>
				</li>

				<li class="diyige">
					<h3>个人总结</h3>
					<ul class="sss">
						<li>1：对定位各个元素不是很熟悉，需要练习</li>
						<li>2：掌握的不快，需要想很多时间</li>
						<li>3：对html及css的标签熟悉掌握程度不够</li>                                                                                                                     </li>
						<li>4：怎么写好像知道，但是不知道怎么下手</li>
					</ul>
				</li>
			</ul>
		</div>

	</body>
</html>
